<template>
  <van-swipe :loop="false" :width="480" :height="175" class="swiperBox">
    <van-swipe-item class="Switem">
      <van-grid square :column-num="7">
        <van-grid-item class="gridItem" v-for="value in gridList" :key="value">
          <a :href="value.jump_url">
            <van-image :src="value.icon" width="30" height="30" />
            <p>{{ value.text }}</p>
          </a>
        </van-grid-item>
      </van-grid>
    </van-swipe-item>
  </van-swipe>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getjigou } from '../../../api/http'
const gridList = ref()

getjigou().then(res => {
  // console.log(res.data.important_position)
  gridList.value = res.data.important_position
})

</script>

<style lang="scss" scoped>
.swiperBox {
  overflow-x: scroll;

  .Switem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .gridItem {
      width: 35px;
      height: 35px;

      p {
        font-size: 13px;
      }

      a {
        color: #999;
      }

    }
  }
}

</style>
